<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :border="false">
      <a-form-model
        ref="ruleForm"
        :model="settingForm"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 18 }"
        :rules="rules"
      >
        <div class="title">基础设置</div>
        <!--        <a-form-model-item label="股东分红周期" ref="name" prop="cycle">-->
        <!--          <a-select v-model="settingForm.cycle" style="width: 120px">-->
        <!--            <a-select-option value="7"> 7天 </a-select-option>-->
        <!--            <a-select-option value="15"> 15天 </a-select-option>-->
        <!--          </a-select>-->
        <!--          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block">说明：当达到设定时间后，会自动生成股东分红奖金池记录，如果没有订单也会生成记录。</span-->
        <!--          >-->
        <!--        </a-form-model-item>-->
        <a-form-model-item label="股东分红周期" ref="name" prop="cycle">
          <a-input style="width: 200px" type="number" class="input-class" v-model="settingForm.cycle" addonAfter="天" />
          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block"
            >说明：当达到设定时间后，会自动生成股东分红奖金池记录，如果没有订单也会生成记录。</span
          >
        </a-form-model-item>
        <a-form-model-item label="分红条件">
          <a-input-number
            style="width: 200px"
            :precision="2"
            :min="0"
            :step="1"
            class="input-class"
            v-model="settingForm.dividends_condition"
          />
          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block"
            >说明：自己在分红周期内到消费金额达到规定条件才能享受该分红周期的分红</span
          >
        </a-form-model-item>
        <a-form-model-item label="是否开启区域分红" ref="name" prop="is_open_area">
          <a-select v-model="settingForm.is_open_area" style="width: 120px">
            <a-select-option :value="0"> 关闭 </a-select-option>
            <a-select-option :value="1"> 开启 </a-select-option>
          </a-select>
          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block"
            >说明：当达到设定时间后，会自动生成股东分红奖金池记录，如果没有订单也会生成记录。</span
          >
        </a-form-model-item>
        <!-- <a-form-model-item label="出局股东冻结佣金比例" ref="name" prop="cycle">
          <a-input style="width: 200px" type="number" class="input-class" v-model="settingForm.shareHolderProfit" addonAfter="%" />
          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block">说明：默认比例为0%</span
          >
        </a-form-model-item>
        <a-form-model-item label="冻结股东佣金（等级）" ref="name" prop="shareHolderLevel">
          <a-select v-model="settingForm.shareHolderLevel" style="width: 120px">
            <a-select-option :value="0"> 所有等级 </a-select-option>
            <a-select-option :value="item.id" v-for="(item, i) of shareHolderLevel" :key="i"> {{ item.name }} </a-select-option>
          </a-select>
        </a-form-model-item> -->
        <a-form-model-item
          label="冻结团队范围（层数）"
          ref="name"
          prop="shareHolderNumber"
          v-show="settingForm.shareHolderLevel > 0"
        >
          <a-input-number
            style="width: 200px"
            :min="1"
            :step="1"
            type="number"
            class="input-class"
            v-model="settingForm.shareHolderNumber[0]"
          />
          <a-input-number
            style="width: 200px; margin-left: 10px"
            :step="1"
            :min="parseInt(settingForm.shareHolderNumber[0]) + 1"
            type="number"
            class="input-class"
            v-model="settingForm.shareHolderNumber[1]"
          />
          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block">说明：最小为1，包含自己</span>
        </a-form-model-item>

        <div class="title">提现设置</div>
        <a-form-model-item label="股东提现手续费佣金比例" ref="name" prop="shareHolderCashProfit">
          <a-input
            style="width: 200px"
            type="number"
            class="input-class"
            v-model="settingForm.shareHolderCashProfit"
            addonAfter="%"
          />
          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block">说明：默认比例为0%</span>
        </a-form-model-item>
        <a-form-model-item label="提现方式" ref="name" prop="cash_type">
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col :span="16">
              <a-checkbox :checked="wechat_checked" @change="onCashChange(0, $event)"> 微信支付 </a-checkbox>
              <a-checkbox :checked="alipay_checked" @change="onCashChange(1, $event)"> 支付宝支付 </a-checkbox>
              <a-checkbox :checked="bank_checked" @change="onCashChange(2, $event)"> 银行卡支付 </a-checkbox>
              <!-- <a-checkbox :checked="remaining_checked" @change="onCashChange(3, $event)"> 余额支付 </a-checkbox> -->
              <p style="margin: 8px 0 0 0">
                <span
                  style="
                    font-size: 14px;
                    font-family: PingFangSC-Regular;
                    line-height: 22px;
                    color: rgba(0, 0, 0, 0.45);
                  "
                  >微信自动支付，需要申请微信支付的企业付款到零钱功能</span
                >
              </p>
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item label="最少提现" ref="name" prop="min_money">
          <a-input
            style="width: 200px"
            type="number"
            class="input-class"
            v-model="settingForm.min_money"
            addonAfter="元"
          />
        </a-form-model-item>
        <a-form-model-item label="每日上限" ref="name" prop="cash_max_day">
          <a-input
            style="width: 200px"
            type="number"
            class="input-class"
            v-model="settingForm.cash_max_day"
            addonAfter="元"
          />
          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block">0元表示不限制每日提现金额</span>
        </a-form-model-item>

        <!-- <a-form-model-item label="是否开启股东审核" ref="name" prop="shareHolderHasCheck">
          <a-switch v-model="settingForm.shareHolderHasCheck" @change="onChange" />
          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block">说明：如果开启审核，客户达到股东审计条件将不会自动升级，需要申请才能成为股东了如果关闭，达到条件将自动升级</span
          >
        </a-form-model-item> -->
        <div class="title">奖金设置</div>
        <a-form-model-item label="佣金设置" prop="cover_url">
          <a-checkbox-group v-model="methods" prop="methods">
            <a-checkbox value="1"> 股东分红 </a-checkbox>
            <a-checkbox value="2"> 极差分红 </a-checkbox>
            <a-checkbox value="3"> 区域分红 </a-checkbox>
          </a-checkbox-group>
          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block"
            >说明：开启了对应的佣金类型，下单才会计算对应类型的佣金。</span
          >
        </a-form-model-item>
        <a-form-model-item label="团队层数" prop="team_num">
          <a-input-number v-model="settingForm.team_num" />
          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block"
            >说明：前端团队查看，只能查看到后台设置的团队层数。</span
          >
        </a-form-model-item>
        <div class="title">前端名称自定义</div>
        <a-form-model-item label="极差分红" prop="range_name">
          <a-input style="width: 200px" v-model="settingForm.range_name"></a-input>
        </a-form-model-item>
        <a-form-model-item label="股东分红" prop="holder_name">
          <a-input style="width: 200px" v-model="settingForm.holder_name"></a-input>
        </a-form-model-item>
        <a-form-model-item label="区域分红" prop="area_name">
          <a-input style="width: 200px" v-model="settingForm.area_name"></a-input>
        </a-form-model-item>
        <a-form-model-item label="直推团队收益" prop="direct_range_name">
          <a-input style="width: 200px" v-model="settingForm.direct_range_name"></a-input>
        </a-form-model-item>
        <a-form-model-item label="极差分红(原关系)" prop="old_range_name">
          <a-input style="width: 200px" v-model="settingForm.old_range_name"></a-input>
        </a-form-model-item>
        <a-form-model-item label="直推团队收益(原关系)" prop="old_add_holder_name">
          <a-input style="width: 200px" v-model="settingForm.old_add_holder_name"></a-input>
        </a-form-model-item>

        <div class="title">分红二维码</div>
        <div class="codeBox">
          <div
            class="codePreview"
            :style="{ backgroundImage: 'url(' + qrcode.backgroundImage + ')', color: qrcode.color }"
          >
            <div class="userBox" :style="{ backgroundColor: qrcode.backgroundColor }">
              <div class="userPic"></div>
              <span class="name">我是某某某</span>
              <span class="tip">代言真的有钱赚！</span>
              <div class="codePic">
                <div class="tips">
                  <span>扫描二维码</span>
                  <span>和我一起赚钱</span>
                </div>
                <div class="pic">
                  <span></span>
                </div>
              </div>
            </div>
            <div class="btns">
              <div class="btn">
                <span><a-icon type="edit" /></span>
                <span>分享给好友</span>
              </div>
              <div class="btn">
                <span><a-icon type="download" /></span>
                <span>保存</span>
              </div>
            </div>
          </div>
          <div class="codeSetting">
            <div class="settingItem">
              <span class="label">背景图片</span>
              <cyyUploadImg
                @uploadSuccess="successCb"
                @deleteImg="deleteCb"
                imgSizeText="375*667"
                :imgSrc="qrcode.backgroundImage"
              ></cyyUploadImg>
            </div>
            <div class="settingItem">
              <soan class="label">背景颜色</soan>
              <a-input type="color" v-model="qrcode.backgroundColor" style="width: 150px" />
            </div>
            <div class="settingItem">
              <soan class="label">字体颜色</soan>
              <a-input type="color" v-model="qrcode.color" style="width: 150px" />
            </div>
          </div>
        </div>
        <div style="text-align: center; margin-top: 20px">
          <a-button type="primary" @click="onSubmit"> 保存 </a-button>
        </div>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { settingInfo, setting, shopDetail } from '@/api/shareholder'
import { cyyUploadImg } from '@/components/CyyUi/index'
export default {
  components: {
    cyyUploadImg,
  },
  data() {
    return {
      wechat_checked: false,
      alipay_checked: false,
      bank_checked: false,
      settingForm: {
        dividends_condition: '0',
        // 奖金池周期
        cycle: 7,
        // 是否开启股东分红
        is_open_share: '',
        // 是否开启极差分红
        is_open_range: '',
        // 是否开启区域分红
        is_open_area: 0,
        // 团队层数
        team_num: '',
        // 极差分红名称
        range_name: '',
        // 股东分红名称
        holder_name: '',
        // 区域分红名称
        area_name: '',

        shareHolderProfit: 0.0,
        //佣金提现比例
        shareHolderCashProfit: 0.0,
        min_money: 0,
        cash_max_day: 0,
        pay_wechat: 0,
        pay_alipay: 0,
        bank: 0,
        shareHolderLevel: 0,
        shareHolderNumber: [0, 0],
        shareHolderHasCheck: false,
        old_range_name: '',
        direct_range_name: '',
        old_add_holder_name: '',
      },
      // 表单验证规则
      rules: {
        cycle: [{ required: true, message: '请选择分红周期', trigger: 'blur' }],
        team_num: [{ required: true, message: '请输入团队层数', trigger: 'blur' }],
        range_name: [{ required: true, message: '请输入极差分红名称', trigger: 'blur' }],
        holder_name: [{ required: true, message: '请输入股东分红名称', trigger: 'blur' }],
        area_name: [{ required: true, message: '请输入区域分红名称', trigger: 'blur' }],
        old_range_name: [{ required: true, message: '请输入极差分红(原关系)名称', trigger: 'blur' }],
        direct_range_name: [{ required: true, message: '请输入直推团队收益名称', trigger: 'blur' }],
        old_add_holder_name: [{ required: true, message: '请输入直推团队收益比例(原关系)名称', trigger: 'blur' }],
      },
      // 二维码相关
      qrcode: {
        backgroundImage: '',
        backgroundColor: '',
        color: '#fff',
      },
      // 佣金方式
      methods: [],
      shareHolderLevel: [],
    }
  },
  computed: {
    time() {
      if (
        this.outletForm.start_time &&
        this.outletForm.start_time != '' &&
        this.outletForm.end_time &&
        this.outletForm.end_time != ''
      ) {
        let date = this.$moment().format('YYYY-MM-DD')
        let start = new Date(date + ' ' + this.outletForm.start_time).getTime()
        let end = new Date(date + ' ' + this.outletForm.end_time).getTime()
        if (start < end) {
          return '今日'
        } else {
          return '明日'
        }
      }
    },
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 查询表单详情
    okPic(e) {
      console.log(e)
      this.outletForm.cover_url = e
    },
    // 根据id获取门店详情
    getDetail() {
      const hide = this.$message.loading('加载中', 0)
      settingInfo()
        .then((res) => {
          if (res.code == 0) {
            console.log(res)
            this.shareHolderLevel = res.data.shareHolderLevel
            this.settingForm.cycle = res.data.setting.cycle ? res.data.setting.cycle : null
            this.settingForm.holder_name = res.data.setting.holder_name
            this.settingForm.range_name = res.data.setting.range_name
            this.settingForm.area_name = res.data.setting.area_name
            this.settingForm.old_range_name = res.data.setting.old_range_name
            this.settingForm.direct_range_name = res.data.setting.direct_range_name
            this.settingForm.old_add_holder_name = res.data.setting.old_add_holder_name
            this.settingForm.team_num = res.data.setting.team_num ? res.data.setting.team_num : null
            this.settingForm.shareHolderProfit = res.data.setting.shareHolderProfit
            this.settingForm.shareHolderCashProfit = res.data.setting.shareHolderCashProfit
            this.settingForm.shareHolderLevel = res.data.setting.shareHolderLevel
            this.settingForm.shareHolderNumber = res.data.setting.shareHolderNumber
            this.settingForm.shareHolderHasCheck = res.data.setting.shareHolderHasCheck === '1'
            this.settingForm.pay_wechat = res.data.setting.pay_wechat
            this.settingForm.pay_alipay = res.data.setting.pay_alipay
            this.settingForm.bank = res.data.setting.bank
            this.settingForm.cash_max_day = res.data.setting.cash_max_day
            this.settingForm.min_money = res.data.setting.min_money
            this.settingForm.is_open_area = parseInt(res.data.setting.is_open_area)
            this.settingForm.dividends_condition = res.data.setting.dividends_condition
            if (res.data.setting.is_open_range == 1) {
              this.methods.push('2')
            }
            if (res.data.setting.is_open_share == 1) {
              this.methods.push('1')
            }
            if (res.data.setting.is_open_area == 1) {
              this.methods.push('3')
            }
            if (res.data.setting.qrcode && res.data.setting.qrcode != '') {
              this.qrcode = JSON.parse(res.data.setting.qrcode)
            }
            if (this.settingForm.pay_wechat == 1) {
              this.wechat_checked = true
            }
            if (this.settingForm.pay_alipay == 1) {
              this.alipay_checked = true
            }
            if (this.settingForm.bank == 1) {
              this.bank_checked = true
            }
          }
          hide()
        })
        .catch((err) => {
          hide()
        })
    },
    successCb(e) {
      this.qrcode.backgroundImage = e.data
    },
    deleteCb(e) {
      this.qrcode.backgroundImage = ''
    },
    onCashChange(type, e) {
      console.log(e)
      if (type === 0) {
        if (e.target.checked === true) {
          this.wechat_checked = true
          this.settingForm.pay_wechat = 1
        } else {
          this.wechat_checked = false
          this.settingForm.pay_wechat = 0
        }
      }
      if (type === 1) {
        if (e.target.checked === true) {
          this.alipay_checked = true
          this.settingForm.pay_alipay = 1
        } else {
          this.alipay_checked = false
          this.settingForm.pay_alipay = 0
        }
      }
      if (type === 2) {
        if (e.target.checked === true) {
          this.bank_checked = true
          this.settingForm.bank = 1
        } else {
          this.bank_checked = false
          this.settingForm.bank = 0
        }
      }
      if (type === 3) {
        if (e.target.checked === true) {
          this.remaining_checked = true
          this.settingForm.remaining_sum = 1
        } else {
          this.remaining_checked = false
          this.settingForm.remaining_sum = 0
        }
      }
    },
    // 点击提交表单
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let param = {
            cycle: this.settingForm.cycle,
            holder_name: this.settingForm.holder_name,
            range_name: this.settingForm.range_name,
            team_num: this.settingForm.team_num,
            area_name: this.settingForm.area_name,
            old_range_name: this.settingForm.old_range_name,
            direct_range_name: this.settingForm.direct_range_name,
            old_add_holder_name: this.settingForm.old_add_holder_name,
            shareHolderProfit: this.settingForm.shareHolderProfit,
            shareHolderCashProfit: this.settingForm.shareHolderCashProfit,
            pay_wechat: this.settingForm.pay_wechat,
            pay_alipay: this.settingForm.pay_alipay,
            bank: this.settingForm.bank,
            cash_max_day: this.settingForm.cash_max_day,
            min_money: this.settingForm.min_money,
            shareHolderLevel: this.settingForm.shareHolderLevel,
            shareHolderNumber: this.settingForm.shareHolderNumber.toString(),
            shareHolderHasCheck: this.settingForm.shareHolderHasCheck ? 1 : 0,
            dividends_condition: this.settingForm.dividends_condition,
          }
          if (this.methods.includes('1')) {
            param.is_open_share = '1'
          } else {
            param.is_open_share = '0'
          }
          if (this.methods.includes('2')) {
            param.is_open_range = '1'
          } else {
            param.is_open_range = '0'
          }
          if (this.methods.includes('3')) {
            param.is_open_area = '1'
          } else {
            param.is_open_area = '0'
          }
          // console.log(this.methods.includes('1'), this.methods.includes('2'), this.methods.includes('3'), this.settingForm.is_open_area);
          // if (this.methods.includes('1')) {
          //   param.is_open_share = '1'
          // } else {
          //   param.is_open_share = '0'
          // }
          // if (this.methods.includes('2')) {
          //   param.is_open_range = '1'
          // } else {
          //   param.is_open_range = '0'
          // }
          // if (this.methods.includes('3')) {
          //   param.is_open_area = '1'
          // } else {
          //   param.is_open_area = '0'
          // }
          param.qrcode = JSON.stringify(this.qrcode)
          console.log(param)
          this.submit(param)
        } else {
          return false
        }
      })
    },
    // 提交设置
    async submit(param) {
      console.log(param)
      const res = await setting(param)
      if (res.code == 0) {
        this.$message.success('保存成功')
        this.getDetail()
      }
    },
  },
}
</script>

<style lang="less" scoped>
.delivery {
  padding-top: 5px;
  p {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 8px;
  }
}
.loadImg {
  padding: 8px;
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  .anticon {
    font-size: 30px;
    color: rgba(0, 0, 0, 0.45);
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.codeBox {
  margin-top: 20px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}
.codePreview {
  color: #fff;
  width: 375px;
  height: 667px;
  background-color: #f83d16;
  background-size: 100% 100%;
  background-position: 100% 100%;
  .userBox {
    display: flex;
    flex-direction: column;
    padding: 27px;
    width: 321px;
    height: 349px;
    border-radius: 24px;
    background-color: #f96932;
    margin: 71px auto 0 auto;
    .userPic {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      background-color: #fff;
    }
    .name {
      font-size: 23px;
      margin-top: 27px;
    }
    .tip {
      margin-top: 6px;
      font-size: 14px;
      opacity: 0.6;
      padding-bottom: 25px;
      border-bottom: 1px solid #fff;
    }
    .codePic {
      padding-top: 25px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .tips {
        display: flex;
        flex-direction: column;
        font-size: 14px;
        opacity: 0.6;
      }
      .pic {
        width: 80px;
        height: 80px;
        background-color: #fff;
        border-radius: 10px;
        padding: 7px;
        span {
          display: block;
          width: 100%;
          height: 100%;
          background-color: #e4e4e4;
        }
      }
    }
  }
  .btns {
    display: flex;
    justify-content: space-between;
    padding: 0 53px;
    margin-top: 33px;
    .btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      span:nth-child(1) {
        width: 65px;
        height: 65px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        font-size: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      span:nth-child(2) {
        font-size: 13px;
        margin-top: 5px;
      }
    }
  }
}
.codeSetting {
  flex: auto;
  margin-left: 100px;
}
.settingItem {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .label {
    margin-right: 20px;
  }
}
</style>
